<template>
  <div class="app-container">
    <div class="filter-container">
         <el-date-picker v-model="filters1.view_date" format="yyyy-MM-dd" :clearable="false"
      value-format="yyyy-MM-dd" align="right" type="date" placeholder="选择生效时间" :picker-options="pickerOptions1">
              </el-date-picker>

      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="loadData">搜索</el-button>
      <!-- <el-button class="filter-item" type="primary" v-waves icon="el-icon-document" @click="exportExcelFile">导出</el-button> -->
    </div>
    <el-table :data="list" @sort-change="sortChange" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="80">
      </el-table-column>

      <el-table-column width="100" prop="adPosition" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{filters1.view_date}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="title" align="center" label="页面" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.pageId|pageTypeFilter}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="sort" align="center" label="浏览用户数" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.viewCount}}</span>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<style scoped>
  .avatar-uploader {
    width: 375px;
    height: 155px;
  }

  .avatar-uploader>>>.avatar {
    width: 375px;
    height: 155px;
  }

  .avatar-uploader>>>.avatar-uploader-icon {
    width: 375px;
    height: 155px;
  }
  .img-src{
    width:100px;
  }

</style>

<script>
let pageTypeFilter = ['会员中心', '商城', '个人中心', '会员二维码']

export default {
  data () {
    return {
      total: 0,
      filters1: {
        view_date: ''
      },
      temp: {
        id: '',

        title: '',

        sort: '',

        startDate: '',

        endDate: '',

        status: '',

        imgSrc: '',

        linkAddr: '',

        cityId: '',

        adPosition: ''
      },
      pickerOptions1: {

        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        },
        {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        },
        {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }
        ]
      },

      rules: {

      }
    }
  },
  created () {
    this.filters1.view_date = this.getToday()
    //   this.init("user_view_page", 1);
    //   this.setFilterAsPostParam();
    this.loadData()
  },

  filters: {
    pageTypeFilter (status) {
      return pageTypeFilter[parseInt(status) - 1]
    },
    statustagFilter (status) {
      return statustagFilter[parseInt(status)]
    }
  },
  methods: {
    loadData () {
      this.$post('admin/user_view_page/list', this.filters1).then(data => {
        this.list = data
      })
    },
    exportExcelFile () {
      this.exportExcel({
        title: '广告管理',
        fields: [{
          field: 'view_date',
          title: '日期'
        },

        {
          field: 'page_name',
          title: '页面'
        },
        {
          field: 'viewed_count',
          title: '浏览数'
        }
        ]
      }).then(info => {
        this.openWin(info)
      })
    }
  }
}

</script>
